<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>Fish Swarm with Controls</h1>


               <script id='init' type='text/x-cindyscript'>
               pts=allmasses()--[K,L,J];
pts=select(pts,(#.size)<9);
apply(pts,#:"vold"=#.v);

      sizes=apply(pts,random()*.6+.5);
      colors=apply(pts,random());

        </script>

<script id='csmove' type='text/x-cindyscript'>

          x=S.x;
          if(x<S1.x,x=S1.x);
          if(x>S2.x,x=S2.x);
          S.xy=(x,S1.y);

          x=R.x;
          if(x<R1.x,x=R1.x);
          if(x>R2.x,x=R2.x);
          R.xy=(x,R1.y);

          x=T.x;
          if(x<T1.x,x=T1.x);
          if(x>T2.x,x=T2.x);
          T.xy=(x,T1.y);

others=|S,S1|/|S1,S2|;
dirothers=|R,R1|/|R1,R2|;
anz=round(|T,T1|/|T1,T2|*14)+1;

pts=allmasses();
pts=select(pts,(#.size)<9);

n=10;
nn=anz;
s1=others*1;
s2=dirothers*1;
s=sum(pts,#.xy);
forall(pts,m,
   vold=m.v;
   sorted=sort(pts,abs(m.xy-#.xy));

   near=sorted_(2..(nn));
   numb=length(near);
  // if(Text0.pressed,
  //   apply(near,draw(#,m,color->(1,1,0)));
  // );
   if(numb!=0,
     mid=sum(near,#.xy)/(numb);
     speed=sum(near,#.v)/(numb),
     mid=m.xy;
     speed=(0,0);
   );

  // if((isreal(speed_1)&isreal(speed_2)),
   if(true,
     m.v=m.v+s1*(mid-m.xy);
     m.v=m.v+s2*speed;
     middir=(B+C+D+E)/4-m.xy;
     m.v=m.v+middir*0.02;
     m.color=hue(|m.v|);
     m.v=m.v/|m.v|;
  );
//vold=m:"vold";

//   if(true,
//    vold=vold/|vold|;
//    errc(vold);
//    vnew=m.v;
//    l=((vnew*vold+1)/2)^2;
//    l=max(l,.3);
//    vv= l*vnew+(1-l)*vold;
//    m.v=vv/|vv|;
//   );
//m:"vold"=m.v;
);



nn=length(pts);
forall(1..nn,p=pts_#;
ang=arctan2(p.vx,-p.vy);
drawimage(p,"fishr",angle->ang,scale->sizes_#,alpha->colors_#);
drawimage(p,"fishb",angle->ang,scale->sizes_#,alpha->1-colors_#);
//draw(p,p-p.v,color->(0,0,0));
//fillcircle(p,.3,color->hue(|p.v|*.2));
//drawcircle(p,.3,color->(0,0,0));
);
//X.xy=[4,3];
//Y.xy=[-5,4];
//Z.xy=[5,-4];
K.v=(0,0);
J.v=(0,0);
L.v=(0,0);

drawtext(S2+(.5,-.2),"position",size->16);
drawtext(S+(0,.7),format(others,2),size->14);

drawtext(R2+(.5,-.2),"direction",size->16);
drawtext(R+(0,.7),format(dirothers,2),size->14);

drawtext(T2+(.5,-.2),"#neigbors",size->16);
drawtext(T+(0,.7),format(anz,0),size->14);


        </script>


        <div  id="CSCanvas" style="width:850px; height:500px; border:2px solid #000000"></div>


        <script type="text/javascript">
            nn=30;
            b=10;
            var gslp=[
                      {name:"B", type:"Free", pos:[-b,b],color:[0,0,0],size:3,pinned:true},
                      {name:"C", type:"Free", pos:[-b,-b],color:[0,0,0],size:3,pinned:true},
                      {name:"D", type:"Free", pos:[b,-b],color:[0,0,0],size:3,pinned:true},
                      {name:"E", type:"Free", pos:[b,b],color:[0,0,0],size:3,pinned:true},
                      {name:"K", type:"Free", pos:[-6,-2],color:[.7,.7,1],size:13},
                      {name:"J", type:"Free", pos:[4,3],color:[.7,.7,1],size:13},
                      {name:"L", type:"Free", pos:[-2,7],color:[.7,.7,1],size:13},



                      {name:"S1", type:"Free", pos:[12,6],color:[0,0,0],pinned:true,size:2},
    {name:"S2", type:"Free", pos:[20,6],color:[0,0,0],pinned:true,size:2},
    {name:"S", type:"Free", pos:[15.5,6],color:[1,0.5,0.5],pinned:false,size:4},
    {name:"l", type:"Segment", args:["S1","S2"],color:[0,0,0],pinned:false,size:2},
   {name:"R1", type:"Free", pos:[12,4],color:[0,0,0],pinned:true,size:2},
    {name:"R2", type:"Free", pos:[20,4],color:[0,0,0],pinned:true,size:2},
    {name:"R", type:"Free", pos:[14,4],color:[1,1,1],pinned:false,size:4},
    {name:"m", type:"Segment", args:["R1","R2"],color:[0,0,0],pinned:false,size:2},
   {name:"T1", type:"Free", pos:[12,0],color:[0,0,0],pinned:true,size:2},
    {name:"T2", type:"Free", pos:[20,0],color:[0,0,0],pinned:true,size:2},
    {name:"T", type:"Free", pos:[15.5,0],color:[0.5,0.5,1],pinned:false,size:4},
    {name:"o", type:"Segment", args:["T1","T2"],color:[0,0,0],pinned:false,size:2},

                      {name:"a", type:"Segment", args:["B","C"],color:[0,0,0],size:1 },
                      {name:"b", type:"Segment", args:["C","D"],color:[0,0,0],size:1 },
                      {name:"c", type:"Segment", args:["D","E"],color:[0,0,0],size:1 },
                      {name:"d", type:"Segment", args:["E","B"],color:[0,0,0],size:1 }



                    ];

    for(var i=0;i<nn;i++){
    gslp.push(
              {name:"A"+i, type:"Free",
              pos:[(Math.random()-.5)*14,(Math.random()-.5)*14],
              color:[1,.5,.5],size:.1}
              )

};
            var physics=[
                       {behavior:{type:"Environment",gravity:0,
                       accuracy:10,deltat:0.2,
                       balls:false,charges:true,friction:0}},

                       {name:"a", behavior:{type:"Bouncer"}},
                       {name:"b", behavior:{type:"Bouncer"}},
                       {name:"c", behavior:{type:"Bouncer"}},
                       {name:"d", behavior:{type:"Bouncer"}},
                       {name:"K", behavior:{type:"Mass",charge:1,fixed:true}},
                       {name:"L", behavior:{type:"Mass",charge:1,fixed:true}},
                       {name:"J", behavior:{type:"Mass",charge:1,fixed:true}},
                       ];


for(var i=0;i<nn;i++){
    physics.push(
              {name:"A"+i, behavior:{
              type:"Mass",
              vx:Math.random()-.5,
              vy:Math.random()-.5,
              charge:1.2},
              }
              )

};
            var cdy = CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        behavior:physics,
                        images:{fishr:"fish/fishr.png",fishb:"fish/fishb.png"}

                        }
                        );

        </script>

        <button onclick="cdy.play()" type="button" style="position:absolute; top:610px;left:60px" >Play</button>
        <button onclick="cdy.pause()" type="button" style="position:absolute; top:610px;left:110px" >Pause</button>
        <button onclick="cdy.stop()" type="button" style="position:absolute; top:610px;left:170px" >Stop</button>

	</body>
</html>
